<template>
  <div class="zc">
    <div class="dl-box row">
      <div class="container" style="height: 400px">
        <div class="row">
          <div class="col-md-8"></div>
          <!--图片修饰-->
          <!--//注册表单-->
          <div class="col-md-4  right-dl">
            <div class="andro_auth-form text-center">
              <h2
                style="padding-top: 30px;margin-top: 0px;margin-bottom: 10px;"
              >
                注册
              </h2>
              <form method="post" style="padding: 7px 30px 0px 30px">
                <div class="form-group ">
                  <p class="ts top" v-show="flag_1">
                    <span class="caret top-sj"></span>用户名为4—8个字符
                  </p>
                  <input
                    id="yh"
                    type="text"
                    name="username"
                    class="form-control"
                    placeholder="用户名"
                    value=""
                    @focus="ti_shi()"
                    @blur="ti_shi1()"
                    v-model="xing"
                    maxlength="8"
                  />
                  <i></i>
                  <span class="after" v-show="flag_2">用户名格式不正确</span>
                </div>
                <div class="form-group ">
                  <p class="ts bottom " v-show="flag_3">
                    <span class="caret bottom-sj"></span>请输入6位密码
                  </p>
                  <input
                    id="mm"
                    name="password"
                    type="password"
                    class="form-control"
                    placeholder="密码"
                    value=""
                    v-model="xing_1"
                    @focus="mima_ts()"
                    @blur="mima_ts1()"
                    maxlength="6"
                  />
                  <i></i>
                  <span class="after" v-show="flag_4">密码格式不正确</span>
                </div>
                <div class="form-group ">
                  <p class="ts bottom " v-show="flag_6">
                    <span class="caret bottom-sj"></span>请确认密码
                  </p>
                  <input
                    id="mm"
                    
                    type="password"
                    class="form-control"
                    placeholder="确认密码"
                    value=""
                    v-model="xing_2"
                    @focus="que_d()"
                    @blur="que_d1()"
                    maxlength="6"
                  />
                  <i></i>
                  <span class="after" v-show="flag_5">两次密码输入不一致</span>
                </div>
                <button
                  id="dl"
                  type="submit"
                  class="andro_btn-custom primary right-dl-but disbutt"
                  @click="zc_a()"
                >
                  <router-link to="/login" href="#"> 注册</router-link>
                </button>

                <div class="row" style="padding-top: 30px">
                  <div class="col-md-4 hen"></div>
                  <span
                    class="col-md-4"
                    style="margin-top: -10px;font-size:16px"
                    >切换</span
                  >
                  <div class="col-md-4 hen"></div>
                </div>

                <div class="form-group">
                  <input
                    type="button"
                    class="form-control fg red  "
                    value=" 继续使用Google "
                  />
                  <input
                    type="button"
                    class="form-control fg pink  "
                    value=" 继续使用微信 "
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 
<style lang="less">
/* body{
            overflow-x: hidden;
        } */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
/*图片的样式*/
.right-dl {
  background-color: #ffffff;
  height: 500px;
  margin-top: 10px;
}
.right-dl-but {
  background-color: #634832;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 30px;
  text-transform: uppercase;
  border-radius: 0;
  z-index: 1;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}
.hen {
  border-top: 1px solid #dddddd;
  display: inline;
}
.fg {
  border: 0;
  margin-top: 20px;
  color: #ffffff;

  height: 40px;
}
.red {
  background-color: #cea461;
}
.pink {
  background-color: #e27f22;
}
.dl-box {
  margin: 30px 0px -150px 0px;
  height: 670px;
  background: url(../../public/img/dlzc.jpg) no-repeat;
  margin-top: 1px;
}
.wanji {
  display: block;
  margin-top: 25px;
  font-size: 16px;
}
/*提示的样式*/
.ts {
  position: absolute;
  background-color: #e1d5b4;
  color: #ffffff;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}
.top {
  top: 62px;
  left: 60px;
  padding-right: 15px;
}
.top-sj {
  position: relative;
  top: 14px;
  color: #e1d5b4;
  margin-left: 0;
  border-top: 10px dashed;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.bottom {
  top: 119px;
  left: 60px;
  padding-right: 15px;
}
.bottom-sj {
  position: relative;
  top: -20px;
  color: #e1d5b4;
  margin-left: 0;
  border-bottom: 10px dashed;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
}
.after {
  position: absolute;
  color: red;
  left: 41%;
  font-size: xx-small;
  /*默认不显示*/
}
.disbutt {
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.65;
  background: #e4e4e4;
  color: #0b0b0b;
  cursor: not-allowed;
}
</style>
<script>
// setTimeout(function(){
//      location. reload()
// this.$router.go(0)
// },100)

  $(document).ready(function () {

     if(location.href.indexOf("#reloaded")==-1){
        location.href=location.href+"#reloaded";
        location.reload();
    }
 })
export default {
  data() {
    return {
      flag_1: false,
      flag_2: false,
      flag_3: false,
      flag_4: false,
      flag_5: false,
      flag_6: false,
      xing: "",
      xing_1: "",
      xing_2: "",
      quere: "",
      count_: 0
    };
  },
  methods: {
    //用户名--聚焦提示
    ti_shi() {
      this.flag_1 = true;
    },
    //用户名--失焦去除提示
    ti_shi1() {
      this.flag_1 = false;
    },
    //密码--聚焦提示
    mima_ts() {
      this.flag_3 = true;
    },
    //密码--失焦去除提示
    mima_ts1() {
      this.flag_3 = false;
    },
    // 确认密码--聚焦提示
    que_d() {
      this.flag_6 = true;
    },
    //确认密码--失焦去除提示
    que_d1() {
      this.flag_6 = false;
    },
    //点击注册  注册成功
    zc_a() {
     this.$axios.post('http://47.114.130.21:3001/register','name='+String(this.xing)
     + '&password=' +String(this.xing_1)).then((data) =>{
        console.log(data);
        if(data.data.code =="200"){
          alert(data.data.msg)          
        }else if(data.data.code=="400"){
          alert(data.data.msg)
        }else if(data.data.code=="404"){
          alert(data.data.msg)
        }
      })

    }
  },
  mounted(){
  // location.reload(); 
  $(document).ready(function () {

     if(location.href.indexOf("#reloaded")==-1){
        location.href=location.href+"#reloaded";
        location.reload();
    }
 })
  },
  //实时监听
  watch: {
    xing: function(newVal, oldVal) {
      //正则判断用户名是否满足条件
      if (newVal != newVal.replace(/^\w{4,8}$/g)) {
        //一致则关闭错误提示框
        this.flag_2 = false;
         if (this.flag_2 || this.flag_4 || this.flag_5) {
          $(".right-dl-but").addClass("disbutt");
        }
      } else {
        //不一致则开启错误提示框
        this.flag_2 = true;
        if (this.flag_2 || this.flag_4 || this.flag_5) {
          $(".right-dl-but").addClass("disbutt");
        } else if (!this.flag_2 && !this.flag_4 && !this.flag_5) {
          $(".right-dl-but").removeClass("disbutt");
        }
      }
    },
    xing_1: function(newVal, oldVal) {
      //正则判断密码是否满足条件
      if (newVal != newVal.replace(/^\d{6}$/gi)) {
        //一致则关闭错误提示框
        this.flag_4 = false;
      } else {
        //不一致则开启错误提示框
        this.flag_4 = true;
        if (this.flag_2 || this.flag_4 || this.flag_5) {
          $(".right-dl-but").addClass("disbutt");
        } else if (!this.flag_2 && !this.flag_4 && !this.flag_5) {
          $(".right-dl-but").removeClass("disbutt");
        }
      }
      //把密码传到确认密码中 判断两次密码是否一致
      this.quere = newVal;
    },
    xing_2: function(nwVa, oldVal) {
      //正则判断是否两次密码是否一致
      if (nwVa == this.quere) {
        //一致则关闭错误提示框
        this.flag_5 = false;
         if (this.flag_2 || this.flag_4 || this.flag_5) {
          $(".right-dl-but").addClass("disbutt");
        } else if (!this.flag_2 && !this.flag_4 && !this.flag_5) {
          $(".right-dl-but").removeClass("disbutt");
        }
      } else {
        //不一致则开启错误提示框
        this.flag_5 = true;
        if (this.flag_2 || this.flag_4 || this.flag_5) {
          $(".right-dl-but").addClass("disbutt");
        } else if (!this.flag_2 && !this.flag_4 && !this.flag_5) {
          $(".right-dl-but").removeClass("disbutt");
        }
      }
    }
  }
};
</script>